import { Button, ButtonGroup, Card, Space, Tooltip } from '@douyinfe/semi-ui';
import {
  IconSettingStroked,
  IconArrowUpLeft,
  IconDoubleChevronLeft,
  IconDoubleChevronRight,
  IconSidebar,
  IconInviteStroked,
} from '@douyinfe/semi-icons';
import { useEffect, useMemo } from 'react';
import { usePageContext } from './context';
import UserFilter from './filter';
import UserTable from './table/table';
import { useDispatch } from 'react-redux';
import { fetchItems } from '@/redux/user/user-actions';
import UserSiderCard from './sider/sider-card';

const UserCard = () => {
  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {
      showSider: PageContext.showSider,
      setShowSider: PageContext.setShowSider,
      addRecord: PageContext.addRecord,
      queryParams: PageContext.queryParams,
    };
  }, [PageContext]);

  const dispatch = useDispatch<any>();
  useEffect(() => {
    dispatch(fetchItems(PageAction.queryParams)).then((res: any) => {
      console.log(res);
    });
  }, [PageAction.queryParams]);

  return (
    <div className='flex gap-x-4'>
      {/* {PageAction.showSider && (
        <UserSiderCard onHide={() => PageAction.setShowSider(false)} />
      )} */}
      <div className='flex flex-col gap-y-4 flex-1'>
        <Card
          bordered={false}
          className='shadow-2xl z-[1]'
          title={
            <Space>
              {!PageAction.showSider && (
                <Tooltip content='部门列表'>
                  <span className='inline-block'>
                    <Button
                      type='tertiary'
                      onClick={() => PageAction.setShowSider(true)}
                      icon={<IconSidebar />}
                    />
                  </span>
                </Tooltip>
              )}
              <ButtonGroup>
                <Button>用户列表</Button>
              </ButtonGroup>
            </Space>
          }
          headerExtraContent={
            <Space>
              {/* <Button
                icon={<IconSettingStroked />}
                onClick={() => PageContext.setShowFloater(true)}></Button> */}
              <Button onClick={PageAction.addRecord}>新增</Button>
            </Space>
          }
        >
          <UserFilter />
        </Card>
        <Card bordered={false}>
          <UserTable />
        </Card>
      </div>
    </div>
  );
};

export default UserCard;
